<template>
    <control title="轮播图">
        <template #content>
            <el-form ref="form" :model="contentdef" label-width="90px" size="mini" label-position="left">
                <div class="control-item-title">图片</div>
                <draggable v-model="content" @start="onStart" @end="onEnd" handle=".select-frame" chosenClass="chosen" forceFallback="true" group="navigation10" animation="1000">
                    <template #item="{element,index}">
                        <div class="select-frame" :key="`ba_${index}`">
                            <i class="le-icon le-icon-cha2 select-photo__close" @click="handleDelete(index)"></i>
                            <div class="select-frame__item">
                            <pictureSelect v-model="element.url" :limit="1">
                                <template #upload>
                                <div  class="select-cover__288-add">
                                    <i class="le-icon le-icon-add select-cover__288-icon"></i>
                                    <span class="select-cover__288-text">添加图片</span>
                                  </div>
                                </template>

                                <template #preview="preview" >
                                  <div class="select-cover__288-edit">
                                    <el-image :src="preview.url" fit="cover"></el-image>
                                    <div class="select-cover__288-tips">替换图片</div>
                                  </div>
                                </template>

                            </pictureSelect>
                        </div>

                            <el-form-item label="链接" label-width="50px">
                                <hyperlinkSelect v-model="element.link">请选择跳转链接</hyperlinkSelect>
                            </el-form-item>
                    </div>
                    </template>
                </draggable>
            </el-form>
            <div class="button-adddata">
                <el-button @click="handleAdditem" :disabled="this.content.length>=10">添加图片</el-button>
                <p class="tips">
                    最多添加10张轮播图片，建议图片尺寸：750px*300px
                </p>
            </div>
        </template>
        <template #style>
            <el-form ref="form" :model="facade" @submit.native.prevent label-width="90px" size="mini" label-position="left">
                
                <div class="control-item-title">轮播图样式</div>
                <choice :data="chamferData" group="list" v-model="facade.chamfer_style"></choice>
                <el-divider></el-divider>
                <div class="control-item-title">指示器样式</div>
                <choice :data="pointerData" group="pointer" v-model="facade.indicator_style"></choice>
                <el-divider></el-divider>
                <div class="control-item-title">指示器位置</div>
                <choice :data="positionData" group="positio" v-model="facade.indicator_align"></choice>
                <el-divider></el-divider>
                <div class="control-item-title">颜色设置</div>
                <el-form-item label="选中颜色">
                    <colour v-model="facade.indicator_color" colour="#f5212d"></colour>
                </el-form-item>
                <div class="control-item-title">轮播图高度</div>
                <el-form-item label="轮播图高度">
                    <slider v-model="facade.height" max="500"></slider>
                </el-form-item>
            </el-form>
        </template>
    </control>
</template>
<script type="text/javascript">
import control from '/$/magic/components/control.vue';
import choice from '/$/magic/components/choice.vue';
import colour from '/$/magic/components/colour.vue'
import draggable from 'vuedraggable'
import pictureSelect from '/$/magic/components/pictureSelect/index.vue'
import slider from '/$/magic/components/slider.vue'

import hyperlinkSelect from '/$/magic/components/hyperlinkSelect/select.vue'

export default {
    components: {
        control,
        choice,
        colour,
        draggable,
        pictureSelect,
        slider,
        hyperlinkSelect
    },
    data() {
        return {
            targ:false,
            contentdef: {},
            chamferData: [{
                value: 1,
                icon: "le-icon-graphic-party",
                name: "方角"
            }, {
                value: 2,
                icon: "le-icon-graphic-rounded",
                name: "圆角"
            }],
            pointerData: [{
                value: 2,
                icon: "le-icon-graphic-point2",
                name: "圆角"
            }, {
                value: 1,
                icon: "le-icon-graphic-point",
                name: "圆形"
            }, {
                value: 3,
                icon: "le-icon-zhishiqi-shuzi",
                name: "数字"
            }],
            positionData: [{
                value: 'left',
                icon: "le-icon-graphic-left",
                name: "居左"
            }, {
                value: 'center',
                icon: "le-icon-graphic-middle",
                name: "居中"
            }, {
                value: 'right',
                icon: "le-icon-graphic-right",
                name: "居右"
            }]
        };
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {
        content: {
            get() {
                return this.$store.getters.content;
            },
            set(value) {
                let data = {
                    key: "content",
                    value: value
                }
                this.$store.commit('setAttribute', data)
            }
        },
        facade: {
            get() {
                return this.$store.getters.facade;
            },
            set(value) {
                let data = {
                    key: "facade",
                    value: value
                }
                this.$store.commit('setAttribute', data)
            }
        }

    },
    /**
     * 页面渲染前
     * @return {[type]} [description]
     */
    created() {

    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {

    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    async mounted() {

    },
    methods: {
        //开始拖拽事件
        onStart() {
            this.drag = true;
        },
        //拖拽结束事件
        onEnd() {
            this.drag = false;
        },
        /**
         * 删除元素
         * @return {[type]} [description]
         */
        handleDelete(index) {
            this.content.splice(index, 1);
        },
        /**
         * 添加元素
         * @return {[type]} [description]
         */
        handleAdditem() {
            if (this.content.length < 10) {
                this.content.push({
                    url: "",
                    link: {}
                });
            } else {
                this.$message({
                    message: '最多添加10张轮播图片',
                    type: 'warning'
                });
            }

        }
    }
};
</script>
<style lang="less" scoped>
@import '../attribute.less';
</style>